<template>
  <div class="route-transform-container">
    <h1>路由转换测试</h1>
    <p>此页面用于测试defineOptions中的route属性转换</p>

    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>自定义路由配置</span>
          <el-tag type="success">使用defineOptions</el-tag>
        </div>
      </template>
      <div>
        <pre><code>{{ routeConfig }}</code></pre>
      </div>
    </el-card>

    <div style="margin-top: 20px">
      <el-alert
        title="路由转换工作原理"
        type="info"
        description="我们的vite:vue-route-options插件会从defineOptions中提取route配置，转换为<route>标签"
        :closable="false"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  // 使用defineOptions定义路由配置
  defineOptions({
    name: 'RouteTransformTest',
    // 路由配置 - 将被转换为<route>标签
    route: {
      path: '/custom-route-path',
      name: 'CustomRouteName',
      meta: {
        title: '路由转换测试',
        icon: 'code',
        orderNo: 5,
        permissions: ['test:route:view'],
      },
      // 子路由配置
      children: [
        {
          path: 'child1',
          name: 'CustomRouteChild1',
          meta: {
            title: '子路由1',
            icon: 'child',
          },
        },
        {
          path: 'child2',
          name: 'CustomRouteChild2',
          meta: {
            title: '子路由2',
            icon: 'child',
          },
        },
      ],
    },
  });

  // 展示路由配置
  const routeConfig = ref(`defineOptions({
  name: 'RouteTransformTest',
  route: {
    path: '/custom-route-path',
    name: 'CustomRouteName',
    meta: {
      title: '路由转换测试',
      icon: 'code',
      orderNo: 5,
      permissions: ['test:route:view']
    },
    children: [
      {
        path: 'child1',
        name: 'CustomRouteChild1',
        meta: { title: '子路由1', icon: 'child' }
      },
      {
        path: 'child2',
        name: 'CustomRouteChild2',
        meta: { title: '子路由2', icon: 'child' }
      }
    ]
  }
})`);
</script>

<style scoped>
  .route-transform-container {
    padding: 20px;
  }

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  pre {
    padding: 15px;
    overflow: auto;
    border-radius: 4px;
    background-color: #f5f7fa;
    font-family: 'Courier New', Courier, monospace;
  }
</style>
